<template lang="pug">
  .mask(v-show='isShow')
    .wrap
      .w-title
        .wt-add 添加行业
        .wt-close(@click="cancel()") ×
      .addindustry
        el-form(:model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm")
          el-form-item(label="行业名称" prop="industryName")
            el-input(v-model="ruleForm.industryName" placeholder="请输入行业名称")
        .btns
          el-button(type="danger" @click="submitForm('ruleForm')" ) 确定
          el-button(@click="cancel()") 取消

</template>
<script>
  import {mapGetters, mapActions} from 'vuex'

  export default {
    name: 'addindustry',
    props: ['industry'],
    data() {
      var validateIndustry = (rule, value, callback) => {
        var arr = value.split('')
        var reg = /[\u4E00-\u9FA5]/;
        for (let i = 0; i < arr.length; i++) {
          if (!reg.test(arr[i])) {
            callback(new Error('行业名称必须为中文'));
          }
        }
        callback();
      }

      return {
        isShow: this.industry,
        ruleForm: {
          industryName: '',
        },
        rules: {
          industryName: [
            {required: true, message: '请输入行业名称', trigger: 'blur'},
            {min: 4, max: 10, message: '长度在 4 到 10 个字符', trigger: 'blur'},
            {validator: validateIndustry, trigger: 'blur'}
          ],
        }
      }
    },
    mounted() {
      /*this.setItem()
      this.queryindustry()*/
    },
    methods: {
      ...mapActions([
        'canpayupdade'
      ]),
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addindustry()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      async addindustry() {
        let list = {
          industryName: this.ruleForm.industryName
        }
        let res = await this.$ajax.post('xyssoManager/industry/insert', list)
        let data = res.data
        if (data.code == 200) {
          this.$message.success('添加成功')
//          this.$set(this.ruleForm,'industryName','')
          this.isShow = false
          this.$emit("refreshList")
//          this.$router.push('industrylist')
        }
      },
      cancel() {
        this.isShow = false
      }
    },
    watch: {
      industry(cur) {
        if (cur == true) {
          this.isShow = cur
        }
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .mask
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    background rgba(0, 0, 0, 0.5)
    .wrap
      position absolute
      top 50%
      left 50%
      margin-left -200px
      margin-top -106px
      width 400px
      height 212px
      background white
      border-radius 5px
      .w-title
        height 50px
        line-height 50px
        border-bottom 1px solid #eaeaea
        color #333333
        .wt-add
          float left
          font-size 16px
          margin-left 20px
        .wt-close
          float right
          margin-right 20px
          font-size 36px
          color #9d9d9d
          cursor pointer
      .addindustry
        padding-top 30px
        .demo-ruleForm
          margin 0 auto
          width 280px
          .el-input
          .el-select
            width 100%
            font-size 12px
        .btns
          margin-top 40px
          text-align center
          button
            width 135px
</style>


